<template>
  <view class="content">
    
    <view class="header-photo">
      <image src="https://small.qaqavr.com/img/zhongrui/banner.png" mode=""></image>
    </view>
    
    <view class="content-header">
      <u-action-sheet :show="show" :actions="columns" title="请选择" @close="show = false" @select="sexSelect"></u-action-sheet>

        <view  class="bumen">部门类型   <u-button @click="show = true">类型查询</u-button></view>
    </view>
    <!-- //列表区域 -->
    <view class="content-workList">
      <view class="workcontent" v-for="item in workList" :key="item.id" @click="workDetails(item)">
        <view class="header-content" >
          <text style="font-size: 30rpx; font-weight: bold; color: #000000;">{{ item.jobName }}<text style="font-size: 20rpx; color: #808080;">( {{ item.jobType.keyWord + item.jobNum }})</text></text>
          <text style="font-size: 32rpx;font-weight: bold; color: #02a7f0;">{{ item.startSalary }} - {{ item.endSalary }}元</text>
        </view>
        <view class="header-body">
          <text style="margin-right: 20rpx; font-size: 22rpx; color: #808080;">{{ item.jobType.typeName }}</text>
          <text style="font-size: 22rpx; color: #808080;">招聘{{ item.recruitmentNum }}人</text>
        </view>
        <view class="header-fotter" >
          <view class="tag" v-for="(item1,index) in item.keyList" :key="index">{{item1}}</view>
        </view>
      </view>
    </view>
   
      <u-loadmore  :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText" />
  
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      columns: [],
      workList: [],
      datachange: {
        equipment: 0,
        jobType: null,
        jobTypeId: null,
        pageIndex: 1,
        pageSize: 10,
        queryString: '',
        recruitmentType: 2,
        openId: ''
      },
      status: 'loadmore',
      loadingText: '加载中',
      loadmoreText: '上拉加载',
      nomoreText: '暂无更多'
    };
  },
  onLoad() {
    this.datachange.openId = uni.getStorageSync('openid');
    // this.getworkList();
    // this.getdata();
  },
  onShow() {
    this.getworkList();
    this.getdata();
  },
  onReachBottom() {
    console.log(123);
    this.datachange.pageSize = this.datachange.pageSize + 10;
    this.getworkList();
    this.status = 'loading';
  },
  methods: {
    async getworkList() {
      const { data } = await uni.$http.post('/job/findPage', this.datachange);
      console.log('我是工作列表=-==>', data);
      if (data.statusCode !== 200) {
        return;
      } else {
        this.workList = data.data.data;
        if (this.workList.length === data.data.total) {
          this.status = 'nomore';
        }
      }
    },
    // 工作详情
    workDetails(item) {
      uni.navigateTo({
        url: '../../components/workDetails/workDetails?item=' + JSON.stringify(item)
      });
    },
    //查询
    sexSelect(e) {
      console.log(e);
      this.show = false;
      this.datachange.jobTypeId = e.id;
      if(e.id === 0) {
        this.datachange.jobTypeId = null
      }
      
      this.getworkList();
    },
    async getdata() {
      const { data } = await uni.$http.get('/jobType/findAll');
      console.log('jishugangwei', data.data);
      const res = data.data;
      let arr = [];
      res.forEach(item => {
        console.log(item);
        arr.push({
          name: item.typeName,
          id: item.id
        });
      });
  
    arr.unshift({
    name:'全部' , 
    id:0
    })
       this.columns = arr;
      console.log('this.columns', this.columns);
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  height: 100%;
   // padding: 0 20rpx;
   background-color: #f2f2f2;

.header-photo {
  height: 300rpx;
  // background-color: skyblue;
    image {
      width: 100%;
      height: 100%;
    }
}
  /deep/.u-button--square.data-v-3bf2dba7 {
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
    }
    /deep/.u-button.data-v-3bf2dba7 {
    width: 300rpx;
    margin: 0;
    margin-left: 20rpx;
    }
   .bumen {
     
      width: 100%;
      height: 100rpx;
      display: flex;
      align-items: center;
      color: #000000;
    }
  .content-header {
    height: 100rpx;
    display: flex;
    padding: 0 20rpx;
    justify-content: center;
    align-items: center;
    background-color: #f2f2f2;
  }
 .content-workList {
   background-color: #f2f2f2;
   padding: 0 20rpx;
   .workcontent {
     // height: 200rpx;
     background-color: #FFFFFF;
     padding:  20rpx;
     display: flex;
     margin-bottom: 10rpx ;
     box-sizing: border-box;
     flex-direction: column;
     .header-content {
       height: 50rpx;
       display: flex;
       align-items: center;
       justify-content: space-between;
     }
     .header-body {
       margin-top: 15rpx;
       display: flex;
       justify-content: flex-start;
       align-items: center;
     }
     .header-fotter {
       margin-top: 25rpx;
       display: flex;
       flex-wrap: wrap;
       .tag {
         font-size: 20rpx;
         margin-right: 10rpx;
         width:fit-content;
         color: #7f7f7f;
         box-sizing: border-box;
         padding: 10rpx;
         border-radius: 5rpx;
         background-color: #f1f1f1;
       }
     }
   }
 }
}
</style>
